<template>
  <el-container class="scrollbar">
    <el-header style="padding: 0">
      <el-affix>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#7FFFD4"
            :router="true"
        >
          <el-menu-item
              style="margin: 0 40px;font-size:24px;letter-spacing: 8px;"
              index="/"
          >人才管理系统-个人中心
          </el-menu-item>
          <el-menu-item index="/#" style="float:right;margin: 0 50px">
            <el-dropdown>
              <el-button type="text" style="color: #becfc9" @click="null">100001-测试用户</el-button>
              <template #dropdown style="">
                <el-dropdown-menu style="width: 100px;display: inline-block;text-align: center">
                  <el-dropdown-item>登出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-affix>
    </el-header>
    <el-container>
      <div style="width: 65px;">
        <el-aside width="65" style="position:fixed;top: 60px;left: 0">
          <el-menu
              :default-active="op"
              class="el-menu-vertical-demo"
              :router="true"
              :collapse="true">
            <el-menu-item index="grjj">
              <i class="el-icon-location"></i>
              <template #title>
                <span>个人简介</span>
              </template>
            </el-menu-item>
            <el-menu-item index="gzgk">
              <i class="iconfont" style="font-weight: bold">&#xe8b0;</i>
              <template #title>工作概况</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <el-main style="padding-bottom: 0">
        <usr_admin_grjj v-if="op==='grjj'"></usr_admin_grjj>
        <usr_admin_gzgk v-if="op==='gzgk'"></usr_admin_gzgk>
        <el-footer height="80px" style="display: flex;justify-content: center;align-items: center;">
          <ul class="footer-ul clearfix">
            <li>
              <span>联系我们</span>
              &nbsp;&nbsp;&nbsp;电话：
              <el-link href="tel:13700000000">13700000000</el-link>
              &nbsp;&nbsp;&nbsp;邮箱：
              <el-link href="mailto:1234567890@qq.com">1234567890@qq.com</el-link>
              &nbsp;&nbsp;&nbsp;地址：
              <el-link href="https://www.sdufe.edu.cn/">山东省济南市山东财经大学</el-link>
            </li>
            <li>Designed By：SDUFE-Undefined © Copyright 2021 山东财经大学鲁兆成 All Rights Reserved</li>
          </ul>
        </el-footer>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import usr_admin_grjj from "@/components/usr_admin_grjj";
import usr_admin_gzgk from "@/components/usr_admin_gzgk";

export default {
  name: "usr_admin",
  // props:['op'],
  data() {
    return {
      activeIndex: '/#',
      affixStatus: '',
      op: 'grjj'
    };
  },
  methods: {
    // func(){
    //   this.$func.goPage('/')
    // }
  },
  mounted() {
    this.op = this.$route.params.op
  },
  components: {
    usr_admin_grjj,
    usr_admin_gzgk
  }
}
</script>

<style scoped>
.footer-ul {
  list-style: none;
  float: left;
}

.footer-ul li {
  padding: 5px 0;
}

.footer-ul li:nth-child(2) {
  font-size: 14px;
}

.footer-ul li span {
  font-size: 18px;
  font-weight: lighter;
}

.affix >>> .el-affix--fixed {
  /*width: 100%!important;*/
}
</style>
